<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="test">尚硅谷IT教育</div>

    <div id="demo">
      <ul>
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
        <li>test4</li>
        <li>test5</li>
      </ul>
    </div>

    <!--
    1. [].slice.call(lis): 将伪数组转换为真数组
    2. node.nodeType: 得到节点类型
    3. Object.defineProperty(obj, propertyName, {}): 给对象添加属性(指定描述符)
    4. Object.keys(obj): 得到对象自身可枚举属性组成的数组
    5. obj.hasOwnProperty(prop): 判断prop是否是obj自身的属性
    6. DocumentFragment: 文档碎片(高效批量更新多个节点)
    -->

    <script type="text/javascript">
      // 1. [].slice.call(lis): 将伪数组转换为真数组
      function fn() {
        console.log(arguments);
      }
      fn(1, 2, 3, 4);

      const lis = document.querySelectorAll("li");
      console.log(lis);

      // ES6
      console.log(Array.from(lis));

      console.log([].slice.call(lis));
      console.log(Array.prototype.slice.call(lis));
      // 2. node.nodeType: 得到节点类型
      // 元素节点 1
      // 文本节点 3
      console.log(lis[0].nodeType);
      // 3. Object.defineProperty(obj, propertyName, {}): 给对象添加属性(指定描述符)

      let name = "jack";
      const obj = {};
      Object.defineProperty(obj, "name", {
        // 属性读取方法
        // 什么时候触发？当你 obj.name 时，就会触发get方法，get方法的返回值就是 obj.name 的值
        get() {
          return name;
        },
        // 属性设置方法
        set(val) {
          name = val;
        },
        // writable: false, // 属性是否可写
        configurable: true, // 属性是否可以重新配置或删除
        enumerable: true, // 属性是否可以枚举（遍历）
      });

      // delete obj.name;

      // 4. Object.keys(obj): 得到对象自身可枚举属性组成的数组
      const person = { name: "jack" };
      person.__proto__.age = 18;
      console.log(Object.keys(person)); // 为了遍历对象
      console.log(Object.values(person));

      // 遍历对象 for in
      Object.keys(person).forEach((key) => {
        console.log(key, person[key]);
      });
      // 5. obj.hasOwnProperty(prop): 判断prop是否是obj自身的属性
      console.log(person.hasOwnProperty("name")); // true
      console.log(person.hasOwnProperty("age")); // false

      for (let key in person) {
        if (person.hasOwnProperty(key)) {
          console.log(key);
        }
      }
      // 6. DocumentFragment: 文档碎片(高效批量更新多个节点)
      const fragment = document.createDocumentFragment();
      const demo = document.getElementById("demo");
      console.log(demo);
      // DOM操作1
      // 一旦元素添加到fragment中，元素就会从DOM树自动移除
      fragment.appendChild(demo.children[0]);
      [].slice.call(fragment.children[0].children).forEach((li) => {
        li.textContent += "~~~";
      });
      // DOM操作2
      demo.appendChild(fragment);
    </script>
  </body>
</html>
